<template>
  <transition name="cutin">
    <div class="fooddetail" v-show="showFlag" ref="foodInfo">
      <div class="fooddetail-wrap">
        <div class="food-content">
          <div class="foodimg">
            <img :src="food.image" alt="">
            <div class="back" @click="closeFlag"></div>
          </div>
          <div class="v-foodtit">
            <p>{{food.name}}</p>
            <span>月售{{food.sellCount}}份</span>
            <span>好评率{{food.rating}}%</span>
          </div>
          <div class="v-price">
            <span class="newprice">￥{{food.price}}</span>
            <span v-show="food.oldPrice" class="oldprice">￥{{food.oldPrice}}</span>
            <div class="cart-control-wrap">
              <cartcontrol :food="food" class="cartbtn"></cartcontrol>
            </div>
            <div class="btn" v-show="!food.count || food.count===0" @click="addCount($event)">加入购物车</div>
          </div>
          <div class="line"></div>
          <div class="v-foodinfo">
            <p class="tit">商品介绍</p>
            <p class="info">{{food.info}}</p>
          </div>
          <div class="line"></div>
          <div class="v-foodstatus">
            <p class="tit">商品信息</p>
            <ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"
                          @ratingType="ratingSelectTypeFn" @changeSwitchP="changeSwitchPFn"></ratingselect>
            <!--评论列表-->
            <div class="rating-wrap">
              <ul v-show="food.ratings && food.ratings.length" class="rating-list">
                <li v-for="rating in food.ratings" v-show="needshow(rating.rateType,rating.text)">
                  <div class="user">
                    <span class="user-name">{{rating.username}}</span>
                    <img class="user-avatar" :src="rating.avatar">
                  </div>
                  <div class="time">{{rating.rateTime | formatDate}}</div>
                  <p class="rating-txt" v-show="rating.text && rating.text.length"><span class="icon-zan"
                                                                                         :class="{'dianzan':rating.rateType===0}"></span>{{rating.text}}
                  </p>
                  <p class="rating-txt" v-show="!rating.text || !rating.text.length">系统默认评价</p>
                </li>
              </ul>
              <div class="no-ratings" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
            </div>
          </div>
          <div class="v-foodratings">
            <ul>
              <li>
                <p><span class="time">{{food.rateTime}}</span><span class="user">{{food.username}}</span></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </transition>

</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  import cartcontrol from '../../components/cartcontrol/cartcontrol.vue';
  import Vue from 'vue';
  import ratingselect from '../../components/ratingselect/ratingselect.vue';
  import {formatDate} from '../../components/commit/date.js'

  const POSITIVE = 0;
  const NEGATIVE = 1;
  const ALL = 2;
  export default{
    props: {
      food: {
        type: Object
      }
    },
    data(){
      return {
        showFlag: false,
        selectType: ALL,
        onlyContent: true,
        desc: {
          all: '全部',
          positive: '推荐',
          neigative: '吐槽'
        }
      }
    },
    methods: {
      show(){
        this.showFlag = true;
        this.selectType = ALL;
        this.onlyContent = false;
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.foodInfo, {
              click: true
            })
          } else {
            this.scroll.refresh();
          }
        })
      },
      closeFlag(){
        this.showFlag = false;
      },
      addCount (event){
        if (!event._constructed) {
          return;
        }
        //第一次可能没有这个food
        Vue.set(this.food, 'count');
        this.food.count = 1;
      },
      ratingSelectTypeFn(type){
        this.selectType = type;
        this.$nextTick(()=> {
          this.scroll.refresh();
        });
        console.log(this.selectType)
      },
      changeSwitchPFn(status){
        if (this.onlyContent === status) {
          this.onlyContent = !status
        } else {
          this.onlyContent = status
        }
        this.$nextTick(()=> {
          this.scroll.refresh();
        });
        console.log(this.onlyContent);
      },
      needshow(type, text){
        if (this.onlyContent && !text) {
          return false;
        }
        if (this.selectType === ALL) {
          return true;
        } else {
          return type === this.selectType;
        }
      }
    },
    filters: {
      formatDate(time) {
        //js模块
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:ss');
      }
    },
    components: {
      cartcontrol,
      ratingselect
    }
  }
</script>

<style type="text/css">
  .fooddetail {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 45px;
    z-index: 30;
    background-color: #fff;
    overflow: hidden;
  }
  .fooddetail .back {
    position: absolute;
    top: 10px;
    width: 40px;
    height: 40px;
    left: 0px;
    background: url(./back.png) no-repeat;
    background-size: 40px 40px;
  }

  .foodimg img {
    width: 100%;
  }

  /*页面跳转的动画*/
  .cutin-enter-active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  .cutin-enter {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  .cutin-leave {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .cutin-leave-active {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  .cutin-enter-active, .cutin-leave-active {
    transition: all 0.2s;
  }

  .v-foodtit {
    margin: 10px 20px;
  }

  .v-foodtit p {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
  }

  .v-foodtit span {
    font-size: 14px;
    color: #93999f;
    padding: 8px 0;
  }

  .v-price {
    padding: 10px 20px;
    position: relative;
    padding-bottom: 30px;
  }

  .v-price span {
    padding: 10px 0;
  }

  .v-price .newprice {
    font-size: 18px;
    color: #f01414;
    font-weight: bold;
    padding-right: 10px;
  }

  .v-price .oldprice {
    color: #93999f;
    text-decoration: line-through;
  }

  .v-price .btn {
    position: absolute;
    right: 5%;
    bottom: 30px;
    color: #ffffff;
    line-height: 32px;
    text-align: center;
    width: 100px;
    height: 32px;
    border-radius: 16px;
    background-color: #00a0dc;
  }

  .v-price .cartbtn {
    position: absolute;
    right: 5%;
    bottom: 30px;
  }

  .line {
    width: 100%;
    height: 18px;
    background-color: #f3f5f7;
    border-top: 1px solid #e6e7e8;
    border-bottom: 1px solid #e6e7e8;
  }

  .v-foodinfo {
    padding: 10px 20px;
    margin-top: 0;
  }

  .v-foodinfo p.tit, .v-foodstatus p.tit {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
  }

  .v-foodinfo p.info {
    padding-left: 10px;
    font-size: 12px;
    line-height: 18px;
    color: #4d555d;
    margin-bottom: 20px;
  }

  .v-foodstatus {
    padding: 10px 20px;
  }

  /*评论列表*/
  .rating-wrap .rating-list li {
    margin: 0 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e7e8;
  }

  .rating-wrap .rating-list li .user {
    margin: 10px 0;
    display: inline-block;
    width: auto;
    height: 20px;
    line-height: 20px;
    color: #93999f;
    font-size: 12px;
    float: right;
  }

  .rating-wrap .rating-list .user-name {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
  }

  .rating-wrap .rating-list li .user img {
    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 50%;
    float: right;
  }

  .rating-wrap .rating-list .time {
    padding: 10px 0;
    color: #93999f;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    /*float: left;*/
  }

  .rating-wrap .rating-list .rating-txt {
    font-size: 14px;
    height: 20px;
    line-height: 20px;
  }

  .rating-wrap .rating-list .icon-zan {
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(no.png) no-repeat;
    background-size: 20px;
  }

  .rating-wrap .rating-list .dianzan {
    background: url(yes.png) no-repeat;
    background-size: 20px;
  }

  .no-ratings {
    padding: 16px;
    font-size: 14px;
    color: #93999f;
  }
</style>
